<template>
  <!-- 回收订单详情 -->
  <el-dialog @close="close" class="pick-dialog" title="回收订单" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px">
    <div class="form-box">
      <div class="order-info ">
        <span>订单编号： {{ruleForm.no}}</span>
        <span>创建时间： {{ruleForm.createTime}}</span>
        <div v-if="ruleForm.orderType == 4 &&ruleForm.orderStatus ==1" style="color: #f40;">完成订单后，系统将自动分账，各方应得金额将转入各自余额</div>
      </div>
      <el-descriptions title="订单信息" :column="3" border :labelStyle="{width:'120px'}">
        <el-descriptions-item label="订单状态"><el-tag :type="commonMaps.backOrderStateMap[ruleForm.orderStatus||1].type">{{commonMaps.backOrderStateMap[ruleForm.orderStatus||1].label}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="支付状态"><span>
            <el-tag type="success" v-if="ruleForm.buyerPayStatus==2">已支付</el-tag>
            <el-tag type="danger" v-if="ruleForm.buyerPayStatus==1">未支付</el-tag>
            <el-tag type="warning" v-if="ruleForm.buyerPayStatus==3">打款中</el-tag>
            <el-tag type="info" v-if="ruleForm.buyerPayStatus==4">财务拒绝</el-tag>
          </span></el-descriptions-item>
        <el-descriptions-item label="换绑状态"><span>
            <el-tag v-if="ruleForm.changeBindState==1" :type="'danger'">未换绑</el-tag>
            <el-tag v-if="ruleForm.changeBindState==2" :type="'success'">已换绑</el-tag>
          </span></el-descriptions-item>

        <el-descriptions-item label="回收订单编号">{{ruleForm.no}}</el-descriptions-item>
        <el-descriptions-item label="买家">{{ruleForm.buyerTenantName}}</el-descriptions-item>
        <el-descriptions-item label="回收人">{{ruleForm.buyerName}}</el-descriptions-item>
        <el-descriptions-item label="回收渠道" v-if="ruleForm.orderType==3">{{ruleForm.channel}}</el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.sellerName" label="卖家">{{ruleForm.sellerName}}<span v-if="ruleForm.orderType==2">({{ ruleForm.sellerTenantName }})</span></el-descriptions-item>
        
        
        <el-descriptions-item v-if="ruleForm.otherNo" label="三方单号">{{ruleForm.otherNo}}</el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.sellerPhone" label="号主电话">{{ruleForm.sellerPhone}}</el-descriptions-item>
        <el-descriptions-item label="游戏名称">{{ruleForm.gameName}}</el-descriptions-item>
        <el-descriptions-item label="区服">
          {{ruleForm.qufu}}
        </el-descriptions-item>
        <el-descriptions-item label="实名">{{ruleForm.relname||'暂无'}}</el-descriptions-item>
        <el-descriptions-item label="游戏账号">{{ruleForm.accountNumber}}</el-descriptions-item>
        <el-descriptions-item label="游戏密码" :span="3">{{ruleForm.accountPassword}}</el-descriptions-item>

        <el-descriptions-item label="简介" :span="3" v-if="ruleForm.des">
          <div style="max-height: 200px;overflow-y: auto;white-space: pre-wrap;">{{ruleForm.des}}</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.img&&ruleForm.img!='[]'" label="游戏截图" :span="3">
          <img-box :img="ruleForm.img"></img-box>
        </el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.secondImg" label="二次截图" >
          <img-box :img="ruleForm.secondImg"></img-box>
        </el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.walletImg" label="钱包截图" >
          <img-box :img="ruleForm.walletImg"></img-box>
        </el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.buyerImg" label="付款截图" >
          <img-box :img="ruleForm.buyerImg"></img-box>
        </el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.guaranteeImg" label="放款截图" >
          <img-box :img="ruleForm.guaranteeImg"></img-box>
        </el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.otherImg&&ruleForm.otherImg!='[]'" label="其他图片" :span="3">
          <img-box :img="ruleForm.otherImg"></img-box>
        </el-descriptions-item>
        <el-descriptions-item label="包赔商" v-if="ruleForm.guaranteeTenantName">{{ruleForm.guaranteeTenantName}}</el-descriptions-item>
        <el-descriptions-item label="包赔费" v-if="ruleForm.guaranteeAmount">
          <span style="color:red">{{ruleForm.guaranteeAmount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="手续费" v-if="ruleForm.guaranteeServiceAmount">
          <span style="color:red">{{ruleForm.guaranteeServiceAmount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="回收价">
          <span style="color:red">{{ruleForm.backAmount}}</span>
        </el-descriptions-item>
          <el-descriptions-item label="线索价">
          <span style="color:red">{{ruleForm.clueAmount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="总金额">
          <span style="color:red">{{ruleForm.buyerActualAmount}}</span>
        </el-descriptions-item>

        <!-- <el-descriptions-item label="包赔客服" v-if="ruleForm.guaranteeTenantId">{{ruleForm.guaranteeName}}</el-descriptions-item> -->
        <el-descriptions-item label="备注" :span="3">{{ruleForm.remark}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="margin-top: 15px;" v-if="collectionInfo&&collectionInfo.collectionUserName" title="收款信息" :column="2" border :labelStyle="{width:'120px'}">
        <el-descriptions-item label="收款方">{{collectionInfo.collectionUserName}}</el-descriptions-item>
        <el-descriptions-item label="收款账号">{{collectionInfo.collectionAccount}}</el-descriptions-item>
      
      </el-descriptions>
      <el-descriptions style="margin-top: 15px;" v-if="baopeiInfo&&baopeiInfo.name" title="卖家信息" :column="3" border :labelStyle="{width:'120px'}">
        <el-descriptions-item label="卖家姓名">{{baopeiInfo.name}}</el-descriptions-item>
        <el-descriptions-item label="卖家手机">{{baopeiInfo.phoneNumber}}</el-descriptions-item>
        <el-descriptions-item label="身份证号" :span="3">{{baopeiInfo.idCard}}</el-descriptions-item>
        <el-descriptions-item label="地址" :span="3">{{baopeiInfo.adress}}</el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.gpsAddr" label="卖家定位" :span="3">{{ruleForm.gpsAddr}}</el-descriptions-item>
        <el-descriptions-item label="家庭信息" :span="3">{{baopeiInfo.familyRemark}}</el-descriptions-item>
        <el-descriptions-item label="其他信息" :span="3">{{baopeiInfo.otherRemark}}</el-descriptions-item>
        <el-descriptions-item label="收款账户" :span="3">{{baopeiInfo.collectionRemark}}</el-descriptions-item>
        <el-descriptions-item label="附件图片" :span="3">
          <div class="img-box flex">
            <div v-for="(item, ind) in baopieInfoImgs" :key="item">
              <img :src="item" @click="review(baopieInfoImgs,ind)" />
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <div class="sfk">
        <span>总金额：</span>
        <span class="price">
          <span>¥</span><span class="txt">{{ ruleForm.buyerActualAmount || 0 }}</span>
        </span>
      </div>

      <div class="center">
        <el-button @click="close('ruleForm')">关闭</el-button>
        <!-- <el-button v-if="ruleForm.orderStatus ==1&&ruleForm.buyerPayStatus==1" type="primary" @click="submitForm('ruleForm')"
          :loading="loading">立即支付</el-button> -->
      </div>
    </div>

  </el-dialog>
</template>

<script>
import onSelfApi from "@/api/retrieveManage/onSelf.js";
import ImgBox from '../../../../components/imgBox.vue';
export default {
  name: "SaleOrderDetail",
  components: {ImgBox},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      isEdit: false,
      payQrShow: false,
      info: "",
      infoArr: [],
      ruleForm: {},
      orderId: "",
      payForm: "",
      from: "",
      baopei: "",
      baopeoList: [],
      payWay: 2,
      showTip: false,
      baopeishang: "",
      timer: 0,
      desImglist: [],
      baopieInfoImgs: [],
      baopeiInfo: {},
      collectionInfo:''
    };
  },
  created() {},
  methods: {
    open(orderId, from) {
      this.from = from || "";
      this.loading = false;
      this.orderId = orderId;
      this.getDetail();

      this.dialogVisible = true;
    },
    getDetail() {
      onSelfApi.getBackClueOrderInfo(this.orderId).then((res) => {
        //console.log("%c Line:137 🍧 订单详情res", "color:#ffdd4d", res);
        this.ruleForm = res.data;
        const arrtemp = [];
        if (this.ruleForm.img) {
          const arr = JSON.parse(this.ruleForm.img);
          if (arr.length) {
            arr.forEach((r) => {
              arrtemp.push(r.url);
            });
          }
        }
        if (this.ruleForm.relnameImg) {
          arrtemp.push(this.ruleForm.relnameImg);
        }
        this.desImglist = arrtemp;
        this.baopieInfoImgs = [];
        if (this.ruleForm.guaranteeInfo) {
          this.baopeiInfo = JSON.parse(this.ruleForm.guaranteeInfo);
          if (this.baopeiInfo.handIdcardImg) {
            this.baopieInfoImgs.push(this.baopeiInfo.handIdcardImg);
          }
          if (this.baopeiInfo.faceIdcardImg) {
            this.baopieInfoImgs.push(this.baopeiInfo.faceIdcardImg);
          }
          if (this.baopeiInfo.emblemIdcardImg) {
            this.baopieInfoImgs.push(this.baopeiInfo.emblemIdcardImg);
          }
          if (this.baopeiInfo.img) {
            const arr = JSON.parse(this.baopeiInfo.img);
            arr.forEach((r) => {
              if (r.url) {
                this.baopieInfoImgs.push(r.url);
              }
            });
          }
        }
        if(this.ruleForm.guaranteeTenantCollection){
         this.collectionInfo = JSON.parse(this.ruleForm.guaranteeTenantCollection)
        }
      });
    },
    review(list,ind) {
      this.$viewerApi({
        images: list,
        options: {
          initialViewIndex: ind,
        },
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.form-box {
  padding: 15px;
  // width: 1000px;
  .img-box {
    flex-wrap: wrap;
    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

.order-info {
  box-sizing: border-box;
  // height: 50px;
  background: #eee;
  padding: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  line-height: 26px;

  > span {
    margin-right: 20px;
  }
}

.price-box {
  text-align: right;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-right: 20px;
}
.payway-box {
  justify-content: flex-end;
}
.payway-item {
  width: 150px;
  border: 1px solid #999;
  border-radius: 2px;
  padding: 5px 10px;
  margin-left: 15px;
  margin-bottom: 15px;
  font-size: 18px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;

  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .icon {
    display: none;
    position: absolute;
    top: 10px;
    right: 3px;
  }
  &.active {
    border: 2px solid #f7423f;
    .icon {
      color: #f7423f;
      display: block;
    }
  }
}

.sfk {
  text-align: right;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;

  .txt {
    font-size: 26px;
    color: #ff0000;
    margin-left: 5px;
  }
}

.demo-ruleForm {
  padding-right: 20px;
}

.center {
  text-align: right;
}

::v-deep .el-dialog__body {
  padding-top: 10px !important;
}

.pick-dialog >>> .el-input--medium input {
  text-align: left;
}
</style>
